<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar title="编辑资料" left-arrow @click-left="$router.back()" fixed />

    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center>
        <template #default>
          <van-image
            round
            class="avatar"
            :src="userProfile.photo"
            @click="handleOpen"
          />
          <!-- 准备一个隐藏的文件域，本质需要通过这个标签选择图片 -->
          <input
            ref="photoRef"
            type="file"
            style="display:none;"
            accept="image/png,image/jpeg"
            @change="handleUpload"
            >
        </template>
      </van-cell>
      <van-cell title="名称" is-link  :value="userProfile.name" @click="isShow1 = true"/>
      <!-- 修改名称的模态框 -->
      <van-dialog
        v-model="isShow1"
        title="修改名称"
        show-cancel-button
        @closed="userObj.name = userProfile.name"
        :before-close="handleBeforeClose"
        >
        <van-field placeholder="请输入名称" v-model="userObj.name" v-focus/>
      </van-dialog>
      <van-cell title="性别" is-link  :value="userProfile.gender ? '女' : '男'"/>
      <van-cell title="生日" is-link  :value="userProfile.birthday" @click="isShow2 = true"/>

      <van-popup v-model="isShow2" position="bottom" :style="{ height: '50%' }">
        <!-- 日期选择器 -->
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择出生日期"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="handlePickerCancel"
          @confirm="handlePickerConfirm"
        />
      </van-popup>
    </van-cell-group>
  </div>
</template>

<script>
import {
  getUserProfileAPI,
  updatePhotoAPI,
  updateProfileAPI
} from '@/api/user'

import dayjs from 'dayjs'
export default {
  name: 'UserEditView',
  data () {
    return {
      // 用户基本资料
      userProfile: { },
      // 控制修改名称模态框的显示
      isShow1: false,
      // 控制修改生日弹出框的显示
      isShow2: false,
      // 收集表单的值
      userObj: {
        name: '',
        birthday: ''
      },
      currentDate: new Date(),
      minDate: new Date(1978, 0, 1),
      maxDate: new Date()
    }
  },
  created () {
    this.getUserProfile()
  },
  methods: {
    // 获取用户基本资料
    async getUserProfile () {
      // 调接口发请求
      const resp = await getUserProfileAPI()
      // 保存用户基本资料
      this.userProfile = resp.data
      // 在userObj中保存一份
      this.userObj.name = resp.data.name
      this.userObj.birthday = resp.data.birthday
      // 把响应数据中的birthday变成一个日期对象赋值给currentDate
      this.currentDate = new Date(this.userProfile.birthday)
    },
    // 打开文件选择器
    handleOpen () {
      // 获取文件域元素调用click()方法
      this.$refs.photoRef.click()
    },
    // 图片上传
    async handleUpload (e) {
      // 获取选择的文件
      const file = e.target.files[0]
      console.log(file)
      // 非空校验
      if (!file) return
      // 创建FormData对象
      const formData = new FormData()
      // 添加后台需要的键值对
      // photo: 后台接口文档需要的参数名
      // file:  文件对象
      formData.append('photo', file)
      // 调接口发请求
      const resp = await updatePhotoAPI(formData)
      // 接收结果，给userProfile中的photo赋值
      this.userProfile.photo = resp.data.photo
    },
    // 模态框关闭前的回调
    async handleBeforeClose (action, done) {
      // action: 有2个值，分别是cancel(取消)和confirm(确定)
      // done: 决定弹框是否关闭的回调函数
      // 如果点击的取消，关闭弹框
      if (action === 'cancel') return done()
      // 1. 校验
      const regexp = /^[a-zA-Z\d\u4e00-\u9fa5]{1,7}$/
      if (!regexp.test(this.userObj.name)) {
        this.$toast.fail('名称包含1-7位中英文数字')
        return done(false)
      }
      // 2. 通过了、调接口发请求
      await updateProfileAPI(this.userObj)
      // 3. 关闭弹框
      this.isShow1 = false
      // 4. 显示修改后的用户名称
      // 方式1：再次调用获取用户资料函数
      // this.getUserProfile()
      // 方式2：直接对userProfile.name属性赋值
      this.userProfile.name = this.userObj.name
    },
    // Picker取消选择
    handlePickerCancel () {
      // 关闭弹框
      this.isShow2 = false
      // 重置currentDate
      this.currentDate = new Date(this.userProfile.birthday)
    },
    // Picker确定选择
    async handlePickerConfirm () {
      // 通过dayjs格式化Picker选择的日期对象，得到符合后台格式的日期字符串
      const birthday = dayjs(this.currentDate).format('YYYY-MM-DD')
      // 调接口发请求
      await updateProfileAPI({
        ...this.userObj,
        birthday
      })
      // 关闭弹出层
      this.isShow2 = false
      // 显示修改后的生日
      this.userProfile.birthday = birthday
    }
  }
}
</script>

<style lang="less" scoped>
.user-edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
</style>
